<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GO机网管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/nifty.min.css" rel="stylesheet">
    <link href="../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../plugins/pace/pace.min.js?2016/8/5"></script>
    <style>
        #table p{
            padding: 5px;
            margin: 0;
            color: #757575;
        }
        td{
            vertical-align: middle!important;

        }

        .panel.active{
            border-color: #2ac845;
        }
    </style>
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body style="display: none"  id="main">
<audio controls="controls" loop="loop" preload="auto"
       src="../mp3/baodao.mp3" style="display: none" id="bofang">
    你的浏览器不支持audio标签
</audio>


<div id="container" class="effect mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">
                    <!--<img src="img/logo.png" alt="Nifty Logo" class="brand-icon">-->
                    <div class="brand-title">
                        <span class="brand-text">logo</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <img class="img-circle img-user media-object" src="../img/av1.png"
                                         alt="Profile Picture">
                                </span>

                            <div id="nav_loginInfo" class="username hidden-xs">admin</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li id="nav-logout">
                                    <a href="#">
                                        <i class="pli-computer-secure icon-lg icon-fw"></i> Lock screen
                                    </a>
                                </li>
                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="login.html" class="btn btn-primary">
                                    <i class="pli-unlock"></i> Logout
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->

                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title" style="position: relative">
                <h1 class="page-header text-overflow">上门订单管理</h1>
                <div class="checkbox" style="position: absolute;right: 30px;top: 10px">
                    <label class="form-checkbox form-normal form-primary form-text"><input type="checkbox" id="open"> 是否开启自动派单</label>
                </div>
            </div>
            <!--End page title-->


            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div id="page-wrapper">
                    <div class="col-sm-8">
                        <div class="btn-group" id="btn">
                            <button type="button" class="btn btn-default active" name="1">待处理</button>
                            <button type="button" class="btn btn-default" name="2">待接单</button>
                            <button type="button" class="btn btn-default" name="3">待维修</button>
                            <button type="button" class="btn btn-default" name="4">待付款</button>
                            <button type="button" class="btn btn-default" name="5">待评价</button>
                            <button type="button" class="btn btn-default" name="6">已完成</button>
                        </div>
                    </div>
                    <div class="col-sm-4 text-right">
                        <button class="btn btn-primary" @click="zanting()">暂停音乐播放</button>
                        <button class="btn btn-primary" v-on:click="prev()" v-show="page>1">上一页</button>
                        <button class="btn btn-primary" v-on:click="next()">下一页</button>
                    </div>
                </div>

                <div class="col-sm-12 pad-btm pad-top">
                    <table class="table table-striped" id="table">
                        <tr v-for="list in order_list">
                            <td style="width: 30%">
                                <div>
                                    <p>订单状态：{{list.status | getStatus}}</p>
                                    <p>订单编号：{{list.order_num}}</p>
                                    <p>下单时间：{{list.ctime | getLocalTime}}</p>
                                    <p>订单金额：{{list.price}}元</p>
                                    <p>订单留言：{{list.message}}</p>
                                </div>
                            </td>
                            <td style="width: 30%">
                                <div>
                                    <p>姓<span style="visibility: hidden">地区</span>名：{{list.uname}}</p>
                                    <p>手机号码：{{list.phone}}</p>
                                    <p>地<span style="visibility: hidden">地区</span>区：{{list.area_name}}</p>
                                    <p>详细地址：{{list.address_info}}</p>
                                    <p>上门时间：{{list.subscribe_time | getLocalTime}}</p>
                                </div>
                            </td>
                            <td style="width: 25%">
                                <div class="text-center">
                                    <p><span v-show="list.admin_info.admin_name">维修师傅：</span>{{list.admin_info.admin_name}} {{list.admin_info.phone}}</p>
                                    <p>机型：{{list.phone_name}} （{{list.color}}，{{list.version}}）</p>
                                    <span class="badge badge-dark pad-all" v-for="li in list.data.fault_info">{{li.name}}</span>
                                    <p v-if="list.admin_message">加价原因：<span v-text="list.admin_message"></span></p>
                                </div>
                            </td>
                            <td style="width: 15%" class="text-center">
                                <button class="btn btn-dark mar-top disabled" disabled  v-text="'利润：'+list.cost+'元'" v-if="list.status>=5"></button>
                                <button class="btn btn-primary mar-top" v-on:click="cancel_order(list.order_id)" v-show="list.status<5">取消订单</button>
                                <button class="btn btn-primary mar-top" v-on:click="alert_order_price(list.order_id)" v-show="list.status==3 || list.status==4">修改价格</button>
                                <button class="btn btn-primary mar-top" v-on:click="sure_order(list.order_id)" v-show="list.status==2">确认接单</button>
                                <button class="btn btn-primary mar-top" v-on:click="appoint(list.order_id)" data-target="#myModal" data-toggle="modal" v-show="list.status==1">订单指派</button>
                            </td>
                        </tr>
                        <tr v-if="order_list.length==0">
                            <td colspan="4" class="text-center">暂无数据</td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>

        <nav id="mainnav-container">

        </nav>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">选择师傅</h4>
                </div>
                <div class="modal-body" style="float: left;clear: both;width: 100%">
                    <div class="col-sm-4 " v-for="list in master.list">
                        <div class="panel panel-bordered pointer master-list" v-on:click="getMasterId(list.admin_id)">
                            <div class="panel-body">
                                <h4 class="text-center text-info" v-text="list.name"></h4>
                                <h3 class="text-center" v-text="list.address"></h3>
                                <p class="mar-top">
                                     <span class="col-sm-5 text-right">
                                        手机号：
                                    </span>
                                    <span class="text-left" v-text="list.phone">

                                    </span>
                                </p>
                                <!--<p class="mar-top">-->
                                     <!--<span class="col-sm-5 text-right">-->
                                        <!--身份证号：-->
                                    <!--</span>-->
                                    <!--<span class="text-left" v-text="list.id_card">-->

                                    <!--</span>-->
                                <!--</p>-->
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="send">指派</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="alert_price" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改维修价格</h4>
                </div>
                <div class="modal-body" style="float: left;clear: both;width: 100%">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="price">价格</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="price" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                       onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="message">修改原因</label>
                            <div class="col-sm-6">
                                <textarea class="form-control" id="message"></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="do_alert_price" @click="sendPriceAlert()">确认修改</button>
                </div>
            </div>
        </div>
    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer" style="padding-left:0 !important; text-align:center !important;">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pull-right">
            <ul class="footer-list list-inline">
                <li>
                    <p class="text-sm">SEO Proggres</p>

                    <div class="progress progress-sm progress-light-base">
                        <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                    </div>
                </li>

                <li>
                    <p class="text-sm">Online Tutorial</p>

                    <div class="progress progress-sm progress-light-base">
                        <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                    </div>
                </li>
                <li>
                    <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                </li>
            </ul>
        </div>


        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt hide">Currently v2.4.1</div>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">Copyright &#0169; 2014-2016  YIHOU  Inc.  All  Rights  Reserved</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL TOP BUTTON -->
    <!--===================================================-->
    <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
    <!--===================================================-->


</div>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../js/left_menu.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../plugins/fast-click/fastclick.min.js"></script>
<script src="../js/nifty.min.js?2016/8/5"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script src="../js/base.js"></script>
<script>

    var order_id;
    var admin_id;
    var status=1;
    var page = 1;
    var reflash = 30000;
    var monitoring_id;
    var alert_order_id;//修改价格的id

    //暂定音乐
    document.getElementById('bofang').pause();

    var vue = new Vue({
        el:"#main",
        data:{
            'master':'',
            'order_list':'',
            'page':1
        },
        methods:{
            'getOrderList':function(data){
                this.order_list = data;
            },
            'appoint':function(id){
                order_id = id;
            },
            'getMasterId':function(id){
                admin_id = id;
            },
            'showMaster':function(){
                var that = this;
                $.post('../index/admin.php?m=Admin&c=Admin&a=getServicemanList',{page:1,count:8},function(res){
                    if(res.code==200){
                        that.master = res.data;
                    }
                },'json');
            },
            'prev':function(){
                if(page>=2){
                    page--;
                    this.page--;
                    showId(status);
                }
            },
            'next':function(){
                page++;
                this.page++;
                showId(status);
            },
            //取消订单
            'cancel_order':function(id){
                var data = {};
                data.order_id = id;
                bootbox.confirm("是否取消此订单?", function(result) {
                    if (result) {
                        $.post('../index/admin.php?m=Admin&c=Order&a=AdminDelOrder',data,function(res){
                            if(res.code==200){
                                showId(status);
//                                alert('订单取消成功')
                            }else{
                                alert(res.message);
                            }
                        },'json');
                    }else{

                    }
                });
            },
            'zanting':function(){
                document.getElementById('bofang').pause();
            },
            //修改价格
            'alert_order_price':function(order_id){
                alert_order_id = order_id;
                $('#price').val('');
                $('#message').val('');
                $('#alert_price').modal('show');
            },
            //修改价格确定
            'sendPriceAlert':function(){
                var data= {};
                data.order_id= alert_order_id;
                data.price = $('#price').val();
                data.admin_message = $('#message').val();
                if(!data.price){
                    alert('请输入修改价格');
                    return false;
                }else{
                    if(data.price==0){
                        alert('请输入大于1元的价格');
                        return false;
                    }
                }
                $.post('../index/admin.php?m=Admin&c=Order&a=updatePrice',data,function(res){
                    if(res.code==200){
                        showId(status);
                        $('#alert_price').modal('hide');
                        alert('价格修改成功');
                    }else{
                        alert(res.message);
                    }
                },'json');
            },
            //确认接单
            'sure_order':function(order_id){
                var data = {};
                data.order_id = order_id;
                $.post('../index/admin.php?m=Admin&c=Order&a=checkGetOrder',data,function(res){
                    if(res.code==200){
                        showId(status);
                        alert('确认接单成功');
                    }else{
                        alert(res.message);
                    }
                },'json');
            }
        },
        ready:function(){
            this.showMaster();
        }
    });



    $('#btn button').click(function(){
        $('#btn button').removeClass('active');
        $(this).addClass('active');
        page = 1;
        vue.page = 1;
        status = $(this).attr('name');
        showId(status,2);
    });


    function showId(status,set){
        var data = {};
        loading.show();
        if(status){
            data.status = status;
        }

        data.page = page;
        data.count = 10;

        $.post('../index/admin.php?m=Admin&c=Order&a=getOrderList',data,function(res){
            loading.close();
            if(res.code==200){
                if(set!=2){
                    if(monitoring_id && status==1){
                        if(monitoring_id != res.data[0].order_id){
                            document.getElementById('bofang').play();
                            alert('订单有变动，请查看');
                        }
                    }
                    monitoring_id = res.data[0].order_id;
                }
                vue.getOrderList(res.data);
            }else if(res.code==201){
                monitoring_id = -1;
                if(page>=2){
                    alert('没有更多数据');
                    vue.page--;
                    page--;
                }else{
                    vue.getOrderList('');
                }
            }else if(res.code==0){
                location.href = 'admin_login.html';
            }
        },'json');
    }

    showId(1);


    //定时器订单获取最新30S
    setInterval(function(){
        showId(status);
    },reflash);


    //选择维修师傅
    $('#main').on('click','.master-list',function(){
        $('.master-list').removeClass('active');
        $(this).addClass('active');
    });

    //发送指派
    $('#send').click(function(){
        var data = {};
        data.admin_id = admin_id;
        data.order_id = order_id;
        $.post('../index/admin.php?m=Admin&c=Admin&a=appointOrder',data,function(res){
            if(res.code==200){
                alert('指派成功');
                $('#myModal').modal('hide');
                document.getElementById('bofang').pause();
                monitoring_id = '';
                showId(status);
            }else if(res.code==201){

            }else{
                alert(res.message);
            }
        },'json');
    });



    Date.prototype.Format = function(format) {
        var date = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S+": this.getMilliseconds()
        };
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1
                        ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
            }
        }
        return format;
    };

    //将UTC格式转为正常的日期格式输出
    function getUTCTime(second) {
        var d = new Date();

        //转换毫秒
        d.setTime(second * 1000);

        /*
         var year=d.getFullYear();
         var month=d.getMonth()+1;
         var datenum=d.getDate();
         var hour = d.getHours();
         var minute = d.getMinutes();
         var second = d.getSeconds();
         return year+"-"+month+"-"+datenum + " " + hour+":"+minute+":"+second;
         */

        return d.Format("yyyy-MM-dd hh:mm");
    }


    Vue.filter('getLocalTime', function (value) {
        return getUTCTime(value)
    });


    Vue.filter('getStatus', function (value) {
        return getStatus(value)
    });

    function getStatus(value){
        var status = '';
        switch(parseInt(value))
        {
            case 1:
                status = '已下单';
                break;
            case 2:
                status = '待接单';
                break;
            case 3:
                status = '待维修';
                break;
            case 4:
                status = '待付款';
                break;
            case 5:
                status = '待评价';
                break;
            case 6:
                status = '已完成';
                break;
        }
        return status;
    }


    /**
     *自动派单开关
     */
    (function(){
        var $open = $('#open');

        /**
         * 开关是否打开
         */
        $open.change(function(){
            var is;
            if($(this).is(':checked')){
                is = 1;
            }else{
                is = 0;
            }
            $.post('../index/admin.php?m=Admin&c=Admin&a=setOrderAutoAppoint',{is_auto:is},function(res){
                if(res.code==200){

                }else if(res.code==201){

                }else{
                    alert(res.message);
                }
            },'json');
        });

        /**
         * 开关初始化
         */
        function initOpen(){
            $.post('../index/admin.php?m=Admin&c=Order&a=getAutoAppoint',{},function(res){
                if(res.code==200){
                    if(res.data == 1){
                        $open.prop('checked',true);
                        $open.parent().addClass('active');
                    }else{
                        $open.prop('checked',false);
                        $open.parent().removeClass('active');
                    }
                }else if(res.code==201){

                }else{
                    alert(res.message);
                }
            },'json');
        }

        initOpen();
    })()
</script>
</body>
</html>
